<template>
	<view class="page">
		<view class="title">
			小熊商城
		</view>
		<image src="../../static/logo.png" mode="widthFix" class="logo"></image>
		<block v-if="appEnv=='H5APP'">
			<view class="row">
				<input placeholder="用户名" class="input" v-model="username" />
			</view>
			<view class="row">
				<input placeholder="密码" password="password" class="input" v-model="password" />
			</view>
		</block>
		<button @tap="login" open-type="getUserInfo" type="primary" class="btn">登陆系统</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: ''
			}
		},
		methods: {
			login: function() {
				let that = this;

				if (that.appEnv == '微信小程序') {
					uni.login({
						success: function(resp) {
							console.log(resp);
							var code = resp.code;
							uni.getUserInfo({
								success: function(resp) {
									console.log(resp);
									let nickname = resp.userInfo.nickName;
									let avatarUrl = resp.userInfo.avatarUrl;
									uni.request({
										url: that.url.wx.login,
										method: "POST",
										data: {
											"code": code,
											"nickname": nickname,
											"photo": avatarUrl
										},
										success: function(resp) {
											let token = resp.data.token
											let expire = resp.data.expires_in
											uni.setStorageSync("token", token)
											uni.setStorageSync("expire", expire)
											uni.switchTab({
												url: "../index/index"
											})
										}
									})
								}
							})
						}
					})
				} else if (that.appEnv == "支付宝小程序") {
					my.getAuthCode({
						scopes: "auth_user",
						success: function(resp) {
							console.log("getAuthCode");
							console.log(resp);
							let authCode = resp.authCode;
							my.getAuthUserInfo({
								success: function(resp) {
									//console.log(resp)
									let nickName = resp.nickName
									let avatar = resp.avatar

									uni.request({
										url: that.url.zfb.login,
										method: "POST",
										data: {
											"authCode": authCode,
											"nickname": nickName,
											"photo": avatar
										},
										success: function(resp) {
											let token = resp.data.token
											let expire = resp.data.expires_in
											uni.setStorageSync("token", token)
											uni.setStorageSync("expire", expire)
											uni.switchTab({
												url: "../index/index"
											})
										},
										fail: function(resp) {
											console.log("request")
											console.log(resp)
										}
									})
								},
								fail: function(resp) {
									console.log("getAuthUserInfo")
									console.log(resp)
								}
							})
						}
					})
				} else if (that.appEnv == 'H5APP') {
					if (!/^[A-Za-z0-9]{3,20}$/.test(that.username)) {
						uni.showToast({
							title: "用户名格式错误",
							icon: "none"
						})
					} else if (!/^[A-Za-z0-9]{6,20}$/.test(that.password)) {
						uni.showToast({
							title: "密码格式错误",
							icon: "none"
						})
					} else {
						uni.request({
							url: that.url.login,
							method: "POST",
							data: {
								"username": that.username,
								"password": that.password
							},
							success: function(resp) {
								if (resp.data.code == 0) {
									let token = resp.data.token
									uni.setStorageSync("token", token)
									uni.switchTab({
										url: "../index/index"
									})
								} else {
									uni.showToast({
										title: "登陆失败",
										icon: "none"
									})
								}

							}
						})
					}
				}

			}
		},
		onReady: function() {
			//this.platform = uni.getSystemInfoSync().platform;
		}
	}
</script>

<style>
	.page {
		padding: 0 20%;
	}

	.title {
		font-size: 24px;
		text-align: center;
		font-weight: bold;
		margin-top: 80px;
	}

	.logo {
		width: 100px;
		margin-left: auto;
		margin-right: auto;
		display: block;
		margin-top: 20px;
		margin-bottom: 40px;
	}

	.row {
		padding: 5px 0;
	}

	.input {
		border-bottom: solid 1px #e0e0e0;
		font-size: 16px;
		padding: 8px 10px;
	}

	.btn {
		margin-top: 25px;
	}
</style>
